<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/singer.css">
	<title>歌手</title>
	<link rel="icon" href="./img/favicon.ico">
</head>
<body>
	<div id="logincover">
		<div class="login-inter">
			<img src="./img/关闭.png" id="clo">
			<a href="login.html">去注册</a>
			<div class="row">
				<div class="cur" id="col">短信登录</div>
				<div id="col">密码登陆</div>
				<div id="col">SIM登录</div>
			</div>
			<div id="hint">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>手机号格式不正确</span>
				<span>手机号可用</span>
			</div>
			<div id="phon">
			<input placeholder="手机号">
			<div class="row">
				<div class="col-7">
					<input placeholder="请输入验证码"/>
				</div>
				<div class="col-5">
					<p>获取验证码</p>
				</div>
			</div>
			<p>登录</p>
			</div>
			<div id="pwd">
				<input placeholder="手机号/邮箱/用户名">
				<input placeholder="密码">
				<div id="sign">
						<div class="col">
							<input type="checkbox"/>
							<span>自动登录</span>
						</div>
						<div class="col">
							<span>忘记密码</span>
							<span>|</span>
							<a href="login.html">注册</a>
						</div>
				</div>
				<div id="tisi">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>密码长度在5~12位</span>
				<span>密码长度符合</span>
				</div>
				<p>登录</p>
				<span>手机号或密码不正确</span>
			</div>
			<div id="SIM">
				<input placeholder="手机号">
				<p>登录</p>
				<span>温馨提示：</span>
				<span>1.“SIM登录” 是由中国移动提供的PC端安全登录服务</span>
				<span>2.输入手机号点击 “登录”，即可在手机上查看登录请求，并使用手机进行登录授权</span>
			</div>
			<div class="text">
				登录即同意<span>《咪咕用户服务协议》</span>
				和<span>《咪咕隐私权政策》</span>
			</div>
		</div>
	</div>
	<!-- f1 -->
	<div class="container-fluid">
		<div class="f1">
			<div class="container">
				<div class="row">
					<div class="col-1">
						<img src="img/210928004729927_188x50_4237.png" >
					</div>
					<div class="col-7">
						<ul>
							<li><a href="#">音乐</a></li>
							<li><a href="#">现场</a></li>
							<li><a href="vip.html">
							<img src="img/皇冠.png" >
							会员中心
							</a></li>
							<li><a href="fanxiang.html">凡响计划</a></li>
							<li><a href="#">客户端下载</a></li>
						</ul>
					</div>
					<div class="col-4">
						<input placeholder="搜索歌曲、歌手、MV">
						<img src="./img/206搜索-线性.png">
						<div>
						<img src="./img/no-login.png">
						<div class="log_popup">
							<p><span>一</span>登录后可专享<span>一</span></p>
							<div class="row">
								<div class="col-4">
									<img src="./img/乐谱编辑.png">
									<p>试听记录同步</p>
								</div>
								<div class="col-4">
									<img src="./img/彩铃.png">
									<p>订购酷炫铃音</p>
								</div>
								<div class="col-4">
									<img src="./img/无损音质.png">
									<p>下载无损音乐</p>
								</div>
							</div>
							<div class="row">
								<div class="col-6">
									<span class="lgin">登陆</span>
									</div>
								<div class="col-6">
									<span><a href="login.html">注册</a></span>
									</div>
							</div>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- f2 -->
		<div class="f2">
			<div class="container">
				<ul class="cur">
					<li><a href="homepage.html">首页</a></li>
					<li><a href="playlist.html">歌单</a></li>
					<li><a href="special-issue.html">专辑</a></li>
					<li><a href="hot.html">榜单</a></li>
					<li><a href="#">歌手</a></li>
					<li><a href="crbt.html">彩铃</a></li>
					<li><a href="hardware.html">咪咕周边</a></li>
				</ul>
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">演唱会</a></li>
					<li><a href="#">独家放送</a></li>
					<li><a href="#">MV</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- f3 -->
	<div class="f3">
		<div class="container">
			<ul>
				<li>华语</li>
				<li>欧美</li>
				<li>日韩</li>
			</ul>
			<ul>
				<li>男</li>
				<li>女</li>
				<li>组合</li>
			</ul>
			<ul>
				<li>热门</li>
				<li>A</li>
				<li>B</li>
				<li>C</li>
				<li>D</li>
				<li>E</li>
				<li>F</li>
				<li>G</li>
				<li>H</li>
				<li>I</li>
				<li>J</li>
				<li>K</li>
				<li>L</li>
				<li>M</li>
				<li>N</li>
				<li>O</li>
				<li>P</li>
				<li>Q</li>
				<li>R</li>
				<li>S</li>
				<li>T</li>
				<li>U</li>
				<li>V</li>
				<li>W</li>
				<li>X</li>
				<li>Y</li>
				<li>Z</li>
			</ul>
		</div>
	</div>
	<!-- f4 -->
	<div class="f4">
		<div class="container">
			<div class="row">
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/200611105045154_none_9619.jpg" >
					</div>
					<p>周杰伦</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/210422235940799_none_1146.jpg" >
					</div>
					<p>林俊杰</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/21062400105019_none_3550.jpg" >
					</div>
					<p>陈奕迅</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/200427085944374_none_8853.jpg" >
					</div>
					<p>李荣浩</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/200427085941245_none_9231.jpg" >
					</div>
					<p>毛不易</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/201230145645523_none_4390.jpg" >
					</div>
					<p>薛之嫌</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/200612150329542_none_5505.jpg" >
					</div>
					<p>张杰</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/210225234633918_none_9744.jpg" >
					</div>
					<p>林宥嘉</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/210118091525565_none_5537.jpg" >
					</div>
					<p>许嵩</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/210304112935587_none_9524.jpg" >
					</div>
					<p>华晨宇</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/200921140037480_none_1797.jpg" >
					</div>
					<p>蔡徐坤</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/201127142049304_none_7678.jpg" >
					</div>
					<p>易烊千玺</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/200921135152120_none_8952.jpg" >
					</div>
					<p>胡夏</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/200427115205368_none_7988.jpg" >
					</div>
					<p>李建青</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/210303164420497_none_6225.jpg" >
					</div>
					<p>吴奇</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/21030411252676_none_304.jpg">
					</div>
					<p>ZJ沙楠杰</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/211008161932544_none_1441.jpg" >
					</div>
					<p>王嘉尔</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/21122410350461_none_3663.jpg" >
					</div>
					<p>陈立农</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img-box">
						<img src="./img/210826215801931_none_2815.jpg" >
					</div>
					<p>萧敬腾</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f5 -->
	<div class="f5">
		<div class="container">
			<ul>
				<li><</li>
				<li>1</li>
				<li>></li>
			</ul>
		</div>
	</div>
	<!-- f6 -->
	<div class="f6">
		<div class="container">
			<div class="row">
				<div class="col-9">
					<div class="row">
						<div class="col-4">
							<ul>
								<li><a href="#">咪咕文化</a></li>
								<li><a href="#">咪咕文化官网</a></li>
								<li><a href="#">咪咕音乐简介</a></li>
								<li><a href="#">服务协议</a></li>
								<li><a href="#">隐私权政策</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><a href="#">咪咕音乐家族</a></li>
								<li><a href="#">圈子彩铃</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><a href="#">联系我们</a></li>
								<li><a href="#">业务合作</a></li>
								<li><a href="#">常见问题</a></li>
							</ul>
						</div>
					</div>
					<img src="img/201012095135561_48x48_9661.png" >
				</div>
				<div class="col-3">
					<p>咪咕客户端</p>
					<div class="row">
						<div class="col-6">
							<img src="img/20101209435723_300x300_1190.png" >
							<p>咪咕音乐</p>
						</div>
						<div class="col-6">
							<img src="img/201012094413724_300x300_8080.png" >
							<p>咪咕视频</p>
						</div>
					</div>
				</div>
			</div>
			<div class="ending">
				<div class="ending-left">
					<span>蜀ICP备15012512号</span>
					<span>川网文[2019]2118-124</span>
					<span>网络视听许可证0112648号1</span>
					<span>增值业务许可证A2.B1.B2-2010000</span>
					<span>川公网安备 51010702002209号</span>
				</div>
				<p>Copyright © 2005 - 2022 咪咕音乐有限公司</p>
			</div>
		</div>
	</div>
	<script src="jquery-3.6.0.js"></script>
	<script>
	$('.container-fluid').on('mouseover','a',function(){
			if($(this).text()=='现场'){
				$('.f2 ul:last-child').prop('class','cur').siblings().prop('class','')
			}
			if($(this).text()=='音乐'){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
			}
		})
		$('.container-fluid').mouseleave(function(){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
		})
		// 登录
		$('.f1 .container>.row>.col-4>div').mouseover(function(){
			$('.f1 .log_popup').stop(true).show(300)
		})
		$('.f1 .container>.row>.col-4>div').mouseleave(function(){
			$('.f1 .log_popup').stop(true).hide(300)
		})
		const lgin=document.querySelector('.lgin')
		lgin.onclick=()=>{
				logincover.style=`display: flex;`
			}
			clo.onclick=()=>{
				logincover.style=`display: none;`
			}
			$('.login-inter>div>input:first-child').on('input',function(){
					if($(this).val()==''){
						$('#hint').prop('class','')
						return
					}
				if(/^1[3-9]\d{9}$/.test($(this).val())){
					$('#hint').prop('class','ok')
				}else{
					$('#hint').prop('class','err')
				}
			})
			$('.login-inter>div>input:first-child').blur(function(){
				$('#hint').prop('class','')
			})
			$('#pwd>input:nth-of-type(2)').on('input',function(){
				const l=$(this).val()
				if(l==''){
					$('#tisi').prop('class','')
					return
				}
				if(l.length>12 || l.length<5){
					$('#tisi').prop('class','err')
				}else{
					$('#tisi').prop('class','ok')
				}
			})
			$('#pwd>input:nth-of-type(2)').blur(function(){
				$('#tisi').prop('class','')
			})
			// $('#pwd>p').click(function(){
			// 	let p=$('#pwd>input:first-child').val()
			// 	let w=$('#pwd>input:nth-of-type(2)').val()
			// 	let xhr=new XMLHttpRequest()
			// 	xhr.open('get','/v1/log/lg?phone='+p+'&pwd='+w)
			// 	xhr.send()
			// 	xhr.onload=()=>{
			// 		console.log(xhr.responseText)
			// 		if(xhr.responseText=='err'){
			// 			$('#pwd>span').prop('class','err')
			// 		}
			// 	}
			// })
			$('.login-inter>.row').on('click','div',function(){
				$(this).addClass('cur').siblings().removeClass('cur')
				if($(this).text()=='短信登录'){
					phon.style.display=''
					pwd.style.display='none'
					SIM.style.display='none'
				}
				if($(this).text()=='密码登陆'){
					phon.style.display='none'
					pwd.style.display='block'
					SIM.style.display='none'
				}
				if($(this).text()=='SIM登录'){
					phon.style.display='none'
					pwd.style.display='none'
					SIM.style.display='block'
				}
			})
	</script>
</body>
</html>
